<template>
  <div>
    <h2>患者体温监测</h2>
    <p>患者姓名：{{ patient.name }}</p>
    <p>当前体温（℃）: <input v-model="patient.temperature" /> </p>
    <p>体温状态：{{ zhuangtai }}</p>
    <p v-if="highFeverWarning" class="warning">高温警报！</p>
  </div>
</template>

<style>
.warning {
  color: red;
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue';
import { watch } from 'vue';
import { computed } from 'vue';
import { reactive } from 'vue'

// 患者数据
const patient = reactive({
  name: '郭准',
  temperature: 36.5
})

const zhuangtai = computed(() => {
  const temp = patient.temperature
  if (temp < 36) return '体温过低'
  if (temp <= 37.2) return '正常体温'
  if (temp <= 38) return '低烧'
  if (temp <= 39) return '高烧'
  return '超高热'
})

const highFeverWarning = ref(false)

watch(patient, (newPatient, oldPatient) => {
  console.log(`新体温：${newPatient.temperature}℃（原体温：${oldPatient.temperature}℃）`)
  if (newPatient.temperature >= 40)
    highFeverWarning.value = true;
  else
    highFeverWarning.value = false;
})

</script>